<template>
  <div :class="className" :style="{height:height,width:width}">
  <a-timeline mode="left" style='margin-left: 10%; '>
    <!-- <div style="border:1px solid black;">
      <div :span='5'>
        <span>换关节损伤</span>
        <span v-html="'<br>'" />
        <span>2021/04/06 - 2021/05/08</span>
      </div>
      <div :span='5'>
        <img src="@/assets/team_images/广州富力.jpg" style="width:50px;">
      </div>
      <div :span='5'>
        <span>广州富力</span>
      </div>
    </div>
    <br>
    <br>
    <br> -->
    <a-timeline-item position="right">
      <el-row :gutter="32">
        <el-col :xs="12" :sm="12" :lg="12">
            踝关节损伤
            <span v-html="'<br>'" />
            <span>2021/04/06 - 2021/05/08</span>
        </el-col>
        <el-col :xs="6" :sm="6" :lg="6">
          <div>
            <el-image style='width: 30%;height:30%;margin-left: 25%;'
              :src="require('@/assets/team_images/广州富力.jpg')" />
          </div>
        </el-col>
        <el-col :xs="6" :sm="6" :lg="6">
          <div class="text">
            广州富力
          </div>
        </el-col>
      </el-row>
    </a-timeline-item>
  <!-- <a-timeline mode="left" style='margin-left: 10%; '>
    <a-timeline-item position="right">
      <el-row :gutter="32">
        <el-col :xs="12" :sm="12" :lg="12">
            踝关节损伤
            <span v-html="'<br>'" />
            <span>2021/04/06 - 2021/05/08</span>
        </el-col>
        <el-col :xs="6" :sm="6" :lg="6">
          <div>
            <el-image style='width: 30%;height:30%;margin-left: 25%;'
              :src="require('@/assets/team_images/广州富力.jpg')" />
          </div>
        </el-col>
        <el-col :xs="6" :sm="6" :lg="6">
          <div class="text">
            广州富力
          </div>
        </el-col>
      </el-row>
    </a-timeline-item> -->
    
    <a-timeline-item position="right">
       <el-row :gutter="32">
      <el-col :xs="12" :sm="12" :lg="12">
          骨折
          <span v-html="'<br>'" />
          <span>2021/02/06 - 2021/03/08</span>
      </el-col>
      <el-col :xs="6" :sm="6" :lg="6">
        <div>      
          <el-image style='width: 30%;height:30%;margin-left: 25%; '
            :src="require('@/assets/team_images/广州富力.jpg')"
       >   </el-image>
        </div>
      </el-col>
      <el-col :xs="6" :sm="6" :lg="6">
        <div class="text">      
          广州富力
        </div>
      </el-col>
    </el-row>
    </a-timeline-item>
    <a-timeline-item position="right">
       <el-row :gutter="32">
      <el-col :xs="6" :sm="12" :lg="12">
          韧带撕裂
          <span v-html="'<br>'" />
          <span>2020/04/06 - 2021/05/08</span>
      </el-col>
      <el-col :xs="6" :sm="6" :lg="6">
        <div>      
          <el-image style='width: 30%;height:30%;margin-left: 25%; '
            :src="require('@/assets/team_images/广州富力.jpg')"
       >   </el-image>
        </div>
      </el-col>
      <el-col :xs="6" :sm="6" :lg="6">
        <div class="text">      
          广州富力
        </div>
      </el-col>
    </el-row>
    </a-timeline-item>
    <a-timeline-item position="right">
       <el-row :gutter="32">
      <el-col :xs="12" :sm="12" :lg="12">
          生病
          <span v-html="'<br>'" />
          <span>2019/04/06 - 2021/05/08</span>
      </el-col>
      <el-col :xs="6" :sm="6" :lg="6">
        <div>      
          <el-image style='width: 30%;height:30%;margin-left: 25%; '
            :src="require('@/assets/team_images/广州富力.jpg')"
       >   </el-image>
        </div>
      </el-col>
      <el-col :xs="6" :sm="6" :lg="6">
        <div class="text">      
          广州富力
        </div>
      </el-col>
    </el-row>
    </a-timeline-item>
  </a-timeline>
  
  </div>

  
</template>

<script>
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '630px'
    }
  },
  data() {
    return {
    }
  }
}
</script>
<style>
.text{
    float: left;
    text-align: left;
    width: 100%;
    padding: 20px;
    /* background-color: */
  }
</style>

